<template>
  <!-- 基本资料 -->
  <div>
    <div class="basic-information" ref="datalist">
      <p>
        亲爱的{{ datalist.uname }}
        ，填写真实的资料，有助于好友找到你哦
      </p>
      <el-form
        :model="datalist"
        style="width: 700px"
        ref="form"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item class="img" label="当前头像：">
          <img
            v-if="!datalist.pic"
            style="width: 100px; height: 100px"
            :src="require('@/assets/images/head1.jpg')"
          />
          <img
            v-else
            class="img"
            style="width: 100px; height: 100px"
            :src="datalist.pic"
          />
        </el-form-item>
        <el-form-item label="昵称：">
          <el-input v-model="datalist.uname"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input type="password" v-model="datalist.pwd"></el-input>
        </el-form-item>
        <el-form-item label="电话：">
          <el-input v-model="datalist.phone" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="注册时间：">
          <el-input v-model="time" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="年龄：">
          <el-input
            v-model="datalist.age"
            placeholder="年龄可以为空"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input
            v-model="datalist.email"
            placeholder="邮箱可以为空"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="submit" type="primary">保存</el-button>
          <el-button @click="quit" type="info">退出登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      datalist: {},
      form: {},
      uid: '',
      uname: '',
      pic: '',
      register_date: '',
      time: '',
      pwd: '',
      age: '',
      email: '',

      rules: {
        uname: [{ required: true, message: '必填', trigger: 'blur' }],
        phone: [{ required: true, message: '必填', trigger: 'blur' }],
        pwd: [{ required: true, message: '必填', trigger: 'blur' }],
      },
    }
  },

  methods: {
    //退出登录
    quit() {
      //登录状态依赖 存储在浏览器中的用户信息来判定
      //退出登录 即删除信息
      sessionStorage.removeItem('user')
      localStorage.removeItem('user')
      location.replace('/')
    },
    //点击保存修改后的数据
    submit() {
      // 完成表单验证
      this.$refs['form'].validate(valid => {
        if (valid) {
          console.log('验证通过：', this.datalist)
          // 发送请求，添加个人资料到数据库
          this.$http.userApi.queryUpdate(this.datalist).then(res => {
            console.log('修改个人信息', res)
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '个人资料更新成功',
              })
              // 修改之后再次请求
              let user = sessionStorage.getItem('user')
              user = JSON.parse(user)
              let { uid } = user
              this.uid = uid
              this.$http.userApi.queryById({ uid }).then(res => {
                this.datalist = res.data.data
                console.log(this.datalist)
                this.time = moment(this.datalist.register_date).format(
                  'YYYY-MM-DD'
                )
                console.log(this.time)
              })
              this.$router.push('/')
            }
          })
        }
      })
    },

    uploadSuccess(res, file) {
      console.log('upload', res)
      // 将上传成功后的图片访问地址，存入data
      this.datalist = res.data
    },
  },
  mounted() {
    let user = sessionStorage.getItem('user')
    user = JSON.parse(user)
    let { uid } = user
    this.uid = uid

    this.$http.userApi.queryById({ uid }).then(res => {
      this.datalist = res.data.data
      console.log(this.datalist)
      this.time = moment(this.datalist.register_date).format('YYYY-MM-DD')
      console.log(this.time)
    })
  },
}
</script>

<style lang="scss" scoped>
.basic-information {
  width: 760px;
  .img {
    margin-top: 10px;
    width: 120px;
    height: 120px;
    border-radius: 3px;
  }
  p {
    font-weight: bold;
  }
}
</style>
